<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:include="include :: header('连接数据库')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <form class="form-horizontal m" id="form-details-list">
        <div class="form-group">
            <label class="col-sm-3 control-label">ip地址：</label>
            <div class="col-sm-8">
                <input name="ip" class="form-control" type="text" required="required">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">端口号：</label>
            <div class="col-sm-8">
                <input name="port" class="form-control" type="text" required="required">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">用户名：</label>
            <div class="col-sm-8">
                <input name="root" class="form-control" type="text" required="required">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">密码：</label>
            <div class="col-sm-8">
                <input name="password" class="form-control" type="text" required="required">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-offset-5 col-sm-10">
                <button type="button" class="btn btn-sm btn-primary" lay-filter="rgcode-form-submit" lay-submit><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="submitHandler()"><i class="fa fa-reply-all"></i>关 闭</button>
            </div>
        </div>

    </form>
    <div class="col-sm-12 select-table table-striped" id="rTab">
        <table id="bootstrap-tree-table">
            <thead>
            <tr>
                <th class="center" style="width:50px;">序号</th>
                <th class='left'>数据库名</th>
            </tr>
            </thead>

            <tbody id="valuelist">
            <tr class='center'>
                <td colspan="10">数据显示区</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


<th:block th:include="include :: footer"/>
<script th:inline="javascript">

    var prefix = ctx + "mysql/details/12";
    // // 提交表单
    // $("#form-details-list").validate({
    //     focusCleanup: true
    // });
    //
    // function submitHandler() {
    //     if ($.validate.form()) {
    //         $.operate.save(prefix + "/databaseList", $('#form-details-list').serialize());
    //     }
    // }
    // var object = $.parseJSON(json);
    // console.log()




    // 提交表单
    form.on('submit(rgcode-form-submit)', function (data) {
        //获取所有表
        $('#form-details-edit').attr('method', 'POST');
        admin.reqM('system/details/databaseList', JSON.stringify(data.field), function (data) {
            if (data.resp_code == 200) {
                $("#valuelist").html('');	//初始清空值列表
                $.each(data.datas.tblist, function(n, tblist){ 	//列出每条记录
                    $("#valuelist").append('<tr><td class="center">'+(n+1)+'</td><td>'+tblist+'</td><td class="center"><button class="layui-btn" lay-event="reMapper" onclick="productCode(\''+tblist+'\')">反射</button></td></tr>');
                });
            }else{
                layer.msg('连接失败,检查连接参数是否正确！');
            }
        }, $('#rgcode-form').attr('method'));
        return false;
    });
</script>
</body>
</html>